<template>
  <template v-if="journalData">
    <div class="header-footer">
      <header id="pdf-header" style="">
        <div class="left">
          <img src="~/assets/images/pdf-logo.png" alt="" />
        </div>
        <div class="right">
          <div>
            NAME：<span style="">{{
              profile?.last_name + " " + profile?.first_name
            }}</span
            >LOGBOOK
          </div>
        </div>
      </header>
      <footer id="pdf-footer" style="">
        <div style="display: flex">
          <span>Validated by</span>
          <div class="fill_name" style=""></div>
        </div>
      </footer>
    </div>
    <div ref="pdf" style="padding: 0 100px">
      <div id="pdf" style="overflow: hidden">
        <Layout> <pageOne /> </Layout>
        <Layout> <pageTwo /> </Layout>
        <Layout> <pageThree /> </Layout>
        <Layout> <pageFour /> </Layout>
        <Layout> <pageFive /> </Layout>
        <Layout> <pageSix /> </Layout>
        <Layout> <pageSeven /> </Layout>
        <Layout> <pageEight /> </Layout>
        <Layout> <pageNight /> </Layout>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { defineAsyncComponent, inject, nextTick, provide, ref } from "vue";
import { useMemberStore } from "../../../../store";
import { createPDF } from "../js/createPDF";
import {
  postPartFiveView,
  postPartFour2All,
  postPartFourAll,
  postPartOneView,
  postPartParamsData,
  postPartSevenData,
  postPartSixDataAll,
} from "../../../../api/part";
import { postOnePageQuery } from "../../../../api/banner";
import { postDownloadPdfCount } from "../../../../api/member";
import { message } from "ant-design-vue";
const Layout = defineAsyncComponent(() => import("./Layout.vue"));
const pageOne = defineAsyncComponent(() => import("./components/page_1.vue"));
const pageTwo = defineAsyncComponent(() => import("./components/page_2.vue"));
const pageThree = defineAsyncComponent(() => import("./components/page_3.vue"));
const pageFour = defineAsyncComponent(() => import("./components/page_4.vue"));
const pageFive = defineAsyncComponent(() => import("./components/page_5.vue"));
const pageSix = defineAsyncComponent(() => import("./components/page_6.vue"));
const pageSeven = defineAsyncComponent(() => import("./components/page_7.vue"));
const pageEight = defineAsyncComponent(() => import("./components/page_8.vue"));
const pageNight = defineAsyncComponent(() => import("./components/page_9.vue"));

const { profile } = useMemberStore();
const { locale, locales, setLocale } = useI18n();
const fetching = inject("fetching");
const generating = inject("generating");

// 日志数据-pdf
const journalData = ref();
provide("journalData", journalData);

const getJournalData = async () => {
  let res = await Promise.all([
    postPartOneView(),
    postOnePageQuery(8),
    postOnePageQuery(9),
    postPartFourAll(),
    postPartFour2All(),
    postPartFiveView(),
    postPartParamsData(),
    postPartSixDataAll(),
    postPartSevenData(),
  ]);
  journalData.value = res;

  fetching.value = false;
};

getJournalData();

const pdf = ref();
const generatePDF = async () => {
  if (!pdf.value) return;
  let res = await postDownloadPdfCount();
  if (res.code == 400) {
    message.warning(res.msg);
    goto("/pay");
    return;
  }
  let fileName = "Journal-English(EN).pdf";
  if (locale.value == "cn") {
    fileName = "日志信息-中文(ZH-CN).pdf";
  }

  generatePdfFunc(fileName);
};

const generatePdfFunc = (fileName) => {
  let header = document.querySelector("#pdf-header") as HTMLElement;
  let footer = document.querySelector("#pdf-footer") as HTMLElement;
  generating.value = true;
  setTimeout(() => {
    nextTick(() => {
      createPDF(pdf.value, true)
        .contentWidth(595.266)
        .aliaClass("GROUP_FINAL_CLASS", "divider-inside")
        .footer(footer, { skipPage: 0 })
        .header(header, { skipPage: 0 })
        .margin({ top: 30, bottom: 20 })
        .forcePageTotal(true)
        .setStyleCheck(true)
        .onProgress((page, total) => {
          let percent = (page / total) * 100;
          message.info(
            window
              .$vueLang("pdf_generate_progress")
              .replace("%percent", percent.toFixed(2))
          );
          if (percent == 100) {
            generating.value = false;
            message.success(window.$vueLang("pdf_generate_success"));
          }
        })
        .toPdf(fileName);
    });
  });
  // , 500
};

defineExpose({
  generatePDF,
});
</script>

<style>
body {
  font-size: 16px;
}
</style>

<style scoped lang="less">
.header-footer {
  position: fixed;
  top: -999px;
  left: 0;
  right: 0;
}
.button {
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 9;
}
#pdf {
  // padding: 0 100px;
}

#pdf-preview {
  overflow: hidden;
}

header#pdf-header {
  padding: 10px 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid #434343;
  .left {
    img {
      height: 70px;
      object-fit: cover;
    }
  }
  .right {
    letter-spacing: 2px;
    span {
      padding-right: 20px;
      min-width: 40px;
      display: inline-block;
      line-height: 3;
    }
  }
}
footer#pdf-footer {
  padding-bottom: 30px;
  margin-bottom: 30px;
  // padding-top: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 100px;
  & > div {
    display: flex;
  }
  .fill_name {
    width: 240px;
    height: 30px;
    position: relative;
    top: 0px;
    text-align: center;
    flex: 1;
    border-bottom: 1px solid #434343;
  }
}
</style>
